<template>
  <div class="admin-page">
    <!-- 左侧专栏 -->
    <div class="examine-list-container" :class="{ 'collapsed': !sidebarVisible }">
      <!-- 折叠按钮 -->
      <div class="collapse-btn" @click="toggleSidebar">
        <el-icon :class="{ 'rotate-icon': !sidebarVisible }">
          <ArrowRight />
        </el-icon>
      </div>

      <div class="examine-list-content" v-show="sidebarVisible">
        <div class="examine-list-header">
          <h2 class="centered-title">街景数据审核平台</h2>
        </div>
        <ExamineList
            ref="examineList"
            :points="points"
            @select-point="handleSelectPoint"
            @approve="handleApprove"
            @reject="handleReject"
        />
      </div>
    </div>

    <!-- 右侧地图 -->
    <div class="map-container" :style="{ 'left': sidebarVisible ? '350px' : '0' }">
      <Map
          ref="mapRef"
          :initial-center="mapCenter"
          :markers="markers"
          @map-click="handleMapClick"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import Map from './Map.vue'
import ExamineList from './ExamineList.vue'

export default {
  name: 'AdminView',
  components: {
    Map,
    ExamineList,
    ArrowRight
  },
  setup() {
    // 模拟数据
    const points = ref([
      {
        id: 1,
        longitude: 116.404,
        latitude: 39.915,
        images: [
          'https://inews.gtimg.com/om_bt/O1BQXUf5nLKV1RgQJJTKV8-dXRonoCmOB_H2Dtwn1NOykAA/0',
          'https://q7.itc.cn/q_70/images03/20240520/2e61e4707d6f46a08df9b18dc7a05ba3.jpeg'
        ],
        uploader: '用户1',
        remarks: '北京天安门',
        status: 'pending',
        createdAt: '2023-05-01'
      },
      {
        id: 2,
        longitude: 121.474,
        latitude: 31.230,
        images: [
          'https://example.com/streetview3.jpg'
        ],
        uploader: '用户2',
        remarks: '上海外滩',
        status: 'pending',
        createdAt: '2023-05-02'
      }
    ])

    const mapCenter = ref({ lng: 116.404, lat: 39.915 })
    const markers = ref([])
    const examineList = ref(null)
    const mapRef = ref(null)
    const sidebarVisible = ref(true)

    // 初始化标记点
    const initMarkers = () => {
      markers.value = points.value.map(point => ({
        id: point.id,
        lng: point.longitude,
        lat: point.latitude,
        title: point.remarks || '未命名地点',
        status: point.status
      }))
    }

    // 切换侧边栏
    const toggleSidebar = () => {
      sidebarVisible.value = !sidebarVisible.value
    }

    // 选择点位
    const handleSelectPoint = (point) => {
      mapCenter.value = { lng: point.longitude, lat: point.latitude }
      if (mapRef.value) {
        mapRef.value.setMapCenter(point.longitude, point.latitude)
        mapRef.value.setZoom(16)
      }
      // 小屏幕上点击点位后收起侧边栏
      if (window.innerWidth <= 992 && sidebarVisible.value) {
        toggleSidebar()
      }
    }

    // 审核通过
    const handleApprove = (pointId) => {
      const point = points.value.find(p => p.id === pointId)
      if (point) {
        point.status = 'approved'
        initMarkers()
        ElMessage.success(`已通过点位 ${pointId}`)
      }
    }

    // 审核拒绝
    const handleReject = (pointId) => {
      const point = points.value.find(p => p.id === pointId)
      if (point) {
        point.status = 'rejected'
        initMarkers()
        ElMessage.warning(`已拒绝点位 ${pointId}`)
      }
    }

    // 刷新数据
    const refreshData = () => {
      ElMessage.info('正在刷新数据...')
      initMarkers()
    }

    // 初始化
    initMarkers()

    return {
      points,
      mapCenter,
      markers,
      examineList,
      mapRef,
      sidebarVisible,
      toggleSidebar,
      handleSelectPoint,
      handleApprove,
      handleReject,
      refreshData
    }
  }
}
</script>

<style scoped>
.admin-page {
  position: relative;
  width: 100%;
  height: 100vh;
}

.examine-list-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 350px;
  z-index: 1000;
  transition: transform 0.3s ease;
  display: flex;
}

.examine-list-container.collapsed {
  transform: translateX(-320px);
}

.examine-list-content {
  width: 350px;
  height: 100%;
  background: white;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.collapse-btn {
  width: 30px;
  height: 60px;
  background: white;
  border-radius: 0 15px 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  margin-top: 50vh;
  transform: translateY(-50%);
  z-index: 1001;
  position: absolute;
  right: -30px;
}

.collapse-btn:hover {
  background: #f5f7fa;
}

.collapse-btn .rotate-icon {
  transform: rotate(180deg);
}

.map-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  transition: left 0.3s ease;
}

.centered-title {
  text-align: center;
  margin: 15px 0;
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .examine-list-container {
    width: 300px;
  }

  .examine-list-container.collapsed {
    transform: translateX(-270px);
  }

  .map-container {
    left: 0 !important;
  }

  .collapse-btn {
    height: 40px;
    margin-top: 20px;
    transform: none;
  }
}
</style>
